iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
自我挑戰組

PHP框架-Laravel自學挑戰系列 第 18

DAY18 - resume builder 登入畫面與功能 (下)

  • 分享至 

  • xImage
  •  

哈囉大家好~
今天要來分享一下登入功能的程式碼,那就馬上開始吧!

首先要先到env.檔設置我們在github OAuth App設定中獲得的金鑰以及重新導向的網址:

GITHUB_CLIENT_ID=我的client id
GITHUB_CLIENT_SECRET=我的client secret
GITHUB_REDIRECT_URL="http://localhost:8000/login/github/callback"

之後再app/config這個目錄中找到services.php這個檔案,把剛剛設置的環境變數帶入:

<?php

return [
    'github' => [
        'client_id' => env('GITHUB_CLIENT_ID'),
        'client_secret' => env('GITHUB_CLIENT_SECRET'),
        'redirect' => env('GITHUB_REDIRECT_URL'),
    ],
];

我也有在本地MySQL資料庫裡創建一個名為resume_builder的資料庫,其中有一個資料表user用來儲存登入者的資料。
之後再創建一個LoginController來處理登入的邏輯:

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
    // 讓使用者切換到OAuth provider(github)
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    // 處理provider回傳的callback
    public function HandleProviderCallback($provider)
    {
        $githubUser = Socialite::driver($provider)->user();

        // 檢查使用者資訊是否已經存在於database(檢查是否有該email)
        $existingUser = User::where('email', $githubUser->getEmail())->first();

        if ($existingUser) {
            // 使用者資料已經存在於資料庫,直接讓他登入
            Auth::login($existingUser);
        }else {
            // 若資料庫沒有該使用者資訊,在資料表中創建新的資料(儲存以下欄位資料)
            $newUser = User::create([ 
                'nickname' => $githubUser->getNickname(), // 暱稱
                'name' => $githubUser->getName(), // 名稱
                'email' => $githubUser->getEmail(), 
                'avatar_url' => $githubUser->getAvatar(), // 大頭照
            ]);
            
            Auth::login($newUser); // 讓使用者登入app
        }
        return redirect()->route('dashboard'); 
    }
}

在LoginController中,要確認回傳的內容可以透過dd()這個function:

dd($githubUser); // 偷看有什麼attribute可以拿來用

接著來撰寫需要的對應路徑:(web.php)

Route::get('/', Login::class); //登入頁面

// 成功登入後的dashboard主頁
Route::get('/dashboard', Dashboard::class)->name('dashboard'); 

// github帳號驗證路徑
Route::get('login/{provider}', [LoginController::class, 'redirectToProvider']); 

// 處理成功驗證後的回傳資料
Route::get('login/{provider}/callback', [LoginController::class, 'handleProviderCallback']);

那麼以上就是大致介紹撰寫OAuth App登入過程的程式碼,沒想到要把自己寫的東西整理起來還蠻花時間的/images/emoticon/emoticon16.gif
希望明天也可以順利完成發文任務~


上一篇
DAY17 - resume builder 登入畫面與功能(上)
下一篇
DAY 19 - resume builder 登出功能與navbar
系列文
PHP框架-Laravel自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言